<template>
  <div class="alert">
    <Left-box>
      <card scrapeDataTitle="AI告警统计">
        <AlarmTypeStatistics
          v-if="!israload"
          :showList="false"
          :showcharts="true"
        ></AlarmTypeStatistics>
        <!-- <alertMessageHandle v-if="!israload"></alertMessageHandle> -->
        <!-- <alarmdevicestatistics v-if="!israload"></alarmdevicestatistics> -->
      </card>
      <!-- <card scrapeDataTitle="AI告警处理率">
        <AlarmTypeStatistics
          v-if="!israload"
          :showList="false"
          :showcharts="true"
        ></AlarmTypeStatistics>
      </card> -->
      <card scrapeDataTitle="AI告警处理率">
        <alertProgress v-if="!israload"></alertProgress>
      </card>
      <card scrapeDataTitle="近7天AI告警统计">
        <Intraweekalarmstatistics v-if="!israload"></Intraweekalarmstatistics>
      </card>
    </Left-box>
    <Right-box>
      <!-- <card scrapeDataTitle="今日AI告警情况">
        <AlarmTypeStatistics
          v-if="!israload"
          :showList="false"
        ></AlarmTypeStatistics>
      </card> -->

      <card scrapeDataTitle="近2天AI告警">
        <alertList v-if="!israload"></alertList>
      </card>
    </Right-box>
  </div>
</template>

<script setup lang="ts">
import alarmdevicestatistics from "./components/alarmdevicestatistics.vue";
import alertProgress from "./components/alertProgress.vue";
import alertMessageHandle from "./components/alertMessageHandle.vue";
// import devicealarmrate from './components/devicealarmrate.vue';
import Intraweekalarmstatistics from "./components/Intraweekalarmstatistics.vue";
import alertList from "./components/alertList.vue";
import { onMounted, ref, nextTick, onUnmounted } from "vue";
import { UseLocation } from "@/stores/location";
import { UseHeaderName } from "@/stores/headerName";
import { UseTab } from "@/stores/tab";
import emits from "@/utils/emits";
import AlarmTypeStatistics from "../home/components/alarm-type-statistics.vue";
import { useAppStore } from "@/stores/modules/app";
const { setHidenRight } = useAppStore();
// 导入依赖的组件和方法
const { setHeaderName } = UseHeaderName();
const location = UseLocation();
const tab = UseTab();

// 定义变量
const pollingTimer = ref();
const israload = ref(false);

// 定义方法
const reload = () => {
  console.log("告警reload");

  // 判断是否正在重新加载
  israload.value = true;
  nextTick(() => {
    israload.value = false;
  });
};

const setPollingTimer = () => {
  // 清空并重新设置定时器
  pollingTimer.value && clearInterval(pollingTimer.value);
  pollingTimer.value = setInterval(() => {
    reload();
  }, 30000);
};

// 组件生命周期钩子函数
onMounted(() => {
  setHidenRight();
  // 从本地存储获取locationId，如果存在则设置位置索引，否则设置为1
  const id = localStorage.getItem("locationId");
  if (id) {
    location.SetLocationIndex(id);
  } else {
    location.SetLocationIndex(1);
  }

  // 清除本地存储的locationId
  localStorage.removeItem("locationId");

  // 设置页面头部名称为"告警管理"
  setHeaderName("告警管理");

  // 设置tab为3
  tab.SetTab(3);

  // 监听changeLocation事件并触发reload方法
  emits.on("changeLocation", reload);

  // 设置定时器
  setPollingTimer();
});

onUnmounted(() => {
  // 移除changeLocation事件监听
  emits.off("changeLocation");
});
</script>

<style scoped lang="scss">
.alert {
  & .left_box {
    & .card {
      flex: 0.4;

      &:first-child {
        flex: 0.3;
      }

      &:nth-child(2) {
        flex: 0.3;
      }

      // overflow: hidden;
    }
  }

  & .right_box {
    & .card {
      &:first-child {
        flex: 1;
      }

      &:nth-child(2) {
        flex: 0.67;
      }

      // overflow: hidden;
    }
  }
}
</style>
